
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<link type="text/css" rel="stylesheet"	th:href="@{css/bootstrap.min.css}" />
<link type="text/css" rel="stylesheet" th:href="@{css/main.css}" />
<link type="text/css" rel="stylesheet" th:href="@{css/util.css}" />
<link type="text/css" rel="stylesheet"	th:href="@{css/material-design-iconic-font.min.css}" />
<link type="text/css" rel="stylesheet"	th:href="@{css/font-awesome.min.css}" />
 <head th:replace="fragments/head"></head>
  <body class="app">
  	<script th:replace="fragments/script"></script>
  	<div th:replace="fragments/loading"></div>
    <!-- @TOC -->
    <!-- =================================================== -->
    <!--
      + @Page Loader
      + @App Content
          - #Left Sidebar
              > $Sidebar Header
              > $Sidebar Menu

          - #Main
              > $Topbar
              > $App Screen Content
    -->

    <!-- @Page Loader -->
    <!-- =================================================== -->
    <!-- <div id='loader'>
      <div class="spinner"></div>
    </div>

    <script>
      window.addEventListener('load', () => {
        const loader = document.getElementById('loader');
        setTimeout(() => {
          loader.classList.add('fadeOut');
        }, 300);
      });
    </script> -->
 
    <!-- @App Content -->
    <!-- =================================================== -->
    <div>
      <!-- #Left Sidebar ==================== -->
	<div th:replace="fragments/sidebar"></div>

      <!-- #Main ============================ -->
      <div class="page-container">
        <!-- ### $Topbar ### -->
		<div th:replace="fragments/navbar"></div>

        <!-- ### $App Screen Content ### -->
        <main class='main-content bgc-grey-100'>
          <div id='mainContent'>
            <div id="optionReplacement">
            </div>
            <div id="modal"></div>
          </div>
        </main>
      </div>
    </div>
  </body>
</html>